<template>
  <div class="about">
    <el-row>
      <el-col :span="6">
        <el-select v-model="selectValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="18"
        ><el-input v-model="searchValue" placeholder="请输入内容"></el-input
      ></el-col>
    </el-row>

    <el-table :data="result" border style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="title" label="任务"> </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ scope.row.status | filStatus }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="edit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="remove(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <van-popup
      :overlay="false"
      v-model="show"
      position="top"
      :style="{ height: '10%' }"
    >
      <el-row>
        <el-col :span="20"
          ><el-input v-model="editValue" placeholder="请输入内容"></el-input
        ></el-col>
        <el-col :span="4"
          ><el-button type="primary" @click="update">修改</el-button></el-col
        >
      </el-row>
    </van-popup>

    <!-- 修改的弹出层  -->
  </div>
</template>
<script>
import { Dialog } from "vant";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: "已完成",
        },
        {
          value: 0,
          label: "未完成",
        },
        {
          value: 2,
          label: "取消",
        },
        {
          value: -1,
          label: "全部",
        },
      ],
      selectValue: -1,
      searchValue: "",
      show: false,
      editValue: "",
      editIndex: -1,
    };
  },
  methods: {
    remove(index) {
      Dialog.confirm({
        title: "标题",
        message: "删除",
      })
        .then(() => {
          this.$store.commit("remove", index);
        })
        .catch(() => {
          // on cancel
        });
    },
    edit(index, row) {
      this.show = true;
      this.editIndex = index;
      this.editValue = row.title;
    },
    //修改回填保存下标
    update() {
      this.$store.commit("update", {
        index: this.editIndex,
        value: this.editValue,
      });
      this.show = false;
    },
    //更新vuex
  },
  computed: {
    list() {
      if (this.selectValue != -1) {
        return this.$store.state.list.filter(
          (i) => i.status == this.selectValue
        );
      } else {
        return this.$store.state.list;
      }
    },
    //筛选下拉列表
    result() {
      if (this.searchValue != "") {
        console.log(111);
        return this.list.filter((i) => i.title.includes(this.searchValue));
      } else {
        return this.list;
      }
    },
    //在下来别表的基础上筛选input框
  },
  filters: {
    filStatus(val) {
      if (val == 0) return "未完成";
      if (val == 1) return "已完成";
      if (val == 2) return "取消";
    },
  },
};
</script>
<style lang="scss" scoped>
.van-popup--top {
  top: 50px !important;
}
</style>
